import React, { useState, useEffect } from 'react'
import * as teacher from '../../../api/base/tearcher'
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Modal, Table, message } from 'antd'
import { BaseGeneraForm } from '../../../components'

const Teacher: React.FC = () => {
  const [dataSource, setDataSource] = useState<any[]>([])
  const [formDataConfig, setFormDataConfig] = useState<any[]>([
    {
      type: 'Input',
      label: '教师编号',
      fieldName: 't_code',
      placeholder: '请输入教师编号',
      isDisabled: false,
    },
    {
      type: 'Input',
      label: '教师姓名',
      fieldName: 't_name',
      placeholder: '请输入教师姓名',
      isDisabled: false,
    },
    {
      type: 'Radio',
      label: '教师性别',
      fieldName: 'gender',
      placeholder: '请选择教师性别',
      isDisabled: false,
      child: [
        { value: 0, label: "男" },
        { value: 1, label: "女" },
        { value: 2, label: "保密" }
      ]
    },
    {
      type: 'InputNumber',
      label: '教师电话',
      fieldName: 't_tel',
      placeholder: '请输入教师电话',
      isDisabled: false,
    }
  ])
  const [formData, setFormData] = useState<any>()
  const [open, setOpen] = useState<boolean>(false)
  const [isAdd, setIsAdd] = useState<boolean>(false)

  const getList = async () => {
    const res = await teacher.list()
    if (res.success) {
      setDataSource(res.data)
    }
  }

  const columns = [
    {
      title: '教师编号',
      dataIndex: 't_code',
      key: 't_code',
    },
    {
      title: '姓名',
      dataIndex: 't_name',
      key: 't_name',
    },
    {
      title: '电话',
      dataIndex: 't_tel',
      key: 't_tel',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender', render: (text: number) => <a>{text === 0 ? "男" : text === 1 ? '女' : "保密"}</a>
    },
    {
      title: '操作',
      key: 'option',
      render: (_: any, record: any) => (
        <>
          <Button type="primary" onClick={() => edit(record)}>编辑</Button>
          <>&nbsp;</>
          <Button type="primary" onClick={() => del(record)}>删除</Button>
        </>
      ),
    },
  ];


  useEffect(() => {
    getList()
  }, [])

  const edit = (value: any) => {
    setOpen(true)
    setFormData(value)
    formDataConfig.map(item => {
      if (item.fieldName === 't_code') {
        item.isDisabled = true
      }
      return item
    })
    setFormDataConfig(formDataConfig)
  }
  const del = (value: any) => {
    Modal.confirm({
      title: '确定删除',
      icon: <ExclamationCircleFilled />,
      okText: '是',
      cancelText: '否',
      onOk() {
        teacher.del(value.tid).then(res => {
          if (res.success) {
            getList()
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  const add = () => {
    setOpen(true)
    setIsAdd(true)
  }
  const emitOnFinish = async (value: any, idAdd: boolean) => {
    let res = null
    if (idAdd) {
      res = await teacher.created(value).catch(err => {
        console.log(err)
      })
    } else {
      res = await teacher.update(formData.tid, value).catch(err => {
        console.log(err)
      })
    }

    if (res && res.success) {
      getList()
      message.success(idAdd ? '添加成功，默认密码12346' : '更新成功')
      setOpen(false)
      setIsAdd(false)
      setFormData(null)
    }
  }
  return (
    <>
      <Button onClick={add}>添加</Button>
      <Table dataSource={dataSource} columns={columns} pagination={{ hideOnSinglePage: true }} />

      <BaseGeneraForm
        title="教师设置"
        formData={formData}
        isAdd={isAdd}
        open={open}
        onCancel={() => setOpen(false)}
        formDataConfig={formDataConfig}
        footer={null}
        emitOnFinish={emitOnFinish}
      />

    </>
  )
}

export default Teacher